<template>
  <div class="per_info">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img @click="$router.go(-1)" class="tit_fl_img" src="../assets/myImg/back@2x.png" alt />
      </div>
      <span>留言列表</span>
    </div>
    <!-- 头部导航 -->
    <div class="head_nav">
      <span @click="chaNav(1)" :class="isShowNav == 1? 'isShowNav':''">全部</span>
      <span @click="chaNav(2)" :class="isShowNav == 2? 'isShowNav':''">提交成功</span>
      <span @click="chaNav(3)" :class="isShowNav == 3? 'isShowNav':''">已处理</span>
    </div>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @touchEnd="touchEnd"
      :maxHeight="76"
      @scroll="contentScroll"
    >
      <!-- 留言列表 -->
      <ul class="per_list">
        <li class="per_item" v-for="(item,index) in LeaveMsgList" :key="index" @click="displayDetails(index)">
          <div class="item_top">
            <span>留言类型:{{item.type | type}}</span>
            <span>{{item.create_time}}</span>
          </div>
          <div class="item_con">
            <img class="item_con_img" src="../assets/myImg/tutu@2x.png" alt />
            <div>
              <span>涨粉数量：{{item.number}}</span>
              <p>{{item.content}}</p>
            </div>
          </div>
          <div class="item_btn">{{item.status}}</div>
        </li>
        <li class="isShowTit" v-show="isShowTit">暂无更多数据</li>
        <div class="no_data" v-show="LeaveMsgList.length<=0">
          <h3>暂无数据</h3>
        </div>
      </ul>
    </scroll>


    <!-- 遮罩层 详情弹框 -->
    <van-overlay :show="showDetails">
      <div class="wrapper" @click.stop="barrier">
        <div class="block">
          <img class="wra_img" src="../assets/img/title@2x.png" alt />
          <span class="wra_date">{{currentMsgList.create_time}}</span>
          <div class="wra_info">
            <span>留言详情</span> 
          </div>
          <h2 class="wra_serial">留言类型：{{currentMsgList.type | type}}</h2>
          <ul class="deta_list">
            <li class="deta_item">
              <span>申请数量</span>
              <span>{{currentMsgList.number}}</span>
            </li>

            <li class="deta_item">
              <span>联系电话</span>
              <span>{{currentMsgList.user_tel}}</span>
            </li>
          </ul>
          <ul class="deta_list">
            <li class="deta_item">
              <span>联系微信</span>
              <span>{{currentMsgList.wechat}}</span>
            </li>

            <li class="deta_item">
              <span>抖音账号</span>
              <span>{{currentMsgList.tik_tok}}</span>
            </li>
          </ul>
          <!-- 下方备注信息 -->
          <div class="wra_note">
            <h2>备注</h2> 
            <div class="wra_note_info">
              {{currentMsgList.content}} 
            </div>
          </div>
          <!-- 底部取消按钮 -->
          <div class="foo_btn">关闭</div>
        </div>
      </div>
    </van-overlay>


    <BackTop @click.native="clickTop" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
import Scroll from "../components/common/scroll/Scroll";
// 节流函数
import { throtTling } from "../utils/throttling";
import { getLeaveMessage } from "../api/idiolist";
export default {
  name: "PerInfo",
  components: {
    Scroll,
  },
  data() {
    return {
      isShowNav: "1",
      showDetails: false,
      // 留言列表
      LeaveMsgList: "",
      // 每页几条数据
      limit: 5,
      // 页数
      page: 1,
      pageY: 0,
      // 是否显示暂无数据
      isShowTit: false,
      // 是否显示返回顶部
      isShowBackTop: false,
      // 当前详情
      currentMsgList:{}
    };
  },
  methods: {
    //   导航高亮
    chaNav(index) {
      this.page = 1;
      this.isShowNav = index;
      this.isShowTit = false;
      getLeaveMessage(index, this.limit, this.page).then((res) => {
        if (res.code == 200) {
          this.LeaveMsgList = res.data.data;
        } else {
          this.LeaveMsgList = res.data;
        }
      });
    },
    // 点击遮罩层
    barrier() {
      this.showDetails = false;
    },
    // 请求留言列表数据
    getLeaveMessage() {
      let that = this;
      getLeaveMessage(null, that.limit, that.page).then((res) => {
        if (res.code == 200) {
          that.LeaveMsgList = res.data.data;
        } else {
          that.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
    // 监听滚动 
    contentScroll(position) { 
      //      Math.abs 计算已滚动的区域，转为正数
      //      解决留言页无法返回顶部的bug
      this.pageY = Math.abs(position.y)
      if (position.y < -300) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 返回顶部    
    clickTop() {
      this.$refs.scroll.scrollTo(0, this.pageY, 500);
    }, 
    // 上拉加载更多
    touchEnd: throtTling(function (y) {
      if (y < -120 && !this.isShowTit) {
        let pages = (this.page += 1);
        getLeaveMessage(null, this.limit, pages).then((res) => {
          if (res.code == 200) {
            this.LeaveMsgList.push(...res.data.data);
            this.page += 1;
            this.isShowTit = false;
          } else {
            this.isShowTit = true;
          }
        });
        this.$refs.scroll.finishPullUp();
        // 重新计算高度
        this.$refs.scroll.refresh();
      }
    }, 2000),
    // 点击查看详情弹框
    displayDetails(index){ 
      this.currentMsgList = this.LeaveMsgList[index] 
      this.showDetails = true
    }
  },
  filters:{
    type(val){
      if(val == 1){
        return '涨粉'
      }else if (val == 2){
        return '视频定制'
      }else {
        return '其他'
      }
    }
  },
  mounted() {
    this.getLeaveMessage();  
    this.$refs.scroll.refresh();
  },
};
</script>
 <style lang="less" scoped>
.per_info {
  background: #f7f9fb;
  height: calc(100vh - 1.333rem);
}
// 头部标题
.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  background: #fff;  
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}
// 头部导航
.head_nav {
  margin: 0.08rem 0;
  display: flex;
  justify-content: space-around;
  font-size: 0.453333rem;
  color: #333;
  height: 1.466667rem;
  line-height: 1.466667rem;
  background: #fff;
}
// 留言列表
.per_list {
  margin: 0 0.4rem;
  margin-top: 12.66rem;
  .per_item {
    margin-top: 0.533333rem;
    padding: 0.4rem;
    height: 4.4rem;
    font-size: 0.4rem;
    color: #333;
    border-radius: 0.333333rem;
    background: #fff;
    .item_top {
      display: flex;
      justify-content: space-between;
    }
    .item_con {
      margin: 0.533333rem 0;
      display: flex;
      .item_con_img {
        width: 1.866667rem;
        height: 1.866667rem;
        border-radius: 0.2rem;
      }
      div {
        margin-left: 0.586667rem;
        width: 5.733333rem;
        span {
          font-weight: 700;
        }
        p {
          margin-top: 0.4rem;
          height: 0.933333rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
    .item_btn {
      float: right;
      width: 2.613333rem;
      height: 0.826667rem;
      line-height: 0.826667rem;
      text-align: center;
      color: #fff;
      background: #647cfa;
      border-radius: 0.2rem;
    }
  }
}

// 遮罩层
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center; 
}

.block {
  padding: 0.4rem;
  width: 8rem;
  height: 13.466667rem;
  background: url(../assets/img/bg@2x.png) no-repeat;
  background-size: 100% 100%;
  .wra_img {
    width: 2.8rem;
    height: 0.56rem;
  }
  .wra_date {
    display: block;
    text-align: right;
    color: #999;
    font-size: 0.32rem;
  }
  .wra_info {
    display: flex;
    justify-content: space-between;
    & span:nth-child(1) {
      font-size: 0.533333rem;
      color: #333;
    }
  }
  .wra_serial {
    margin-top: 1.066667rem;
    font-size: 0.426667rem;
    color: #333;
  }
  .deta_list {
    margin-top: 0.533333rem;
    height: 1.866667rem;
    line-height: 0.666667rem;
    border-bottom: 0.026667rem dashed #999;
    .deta_item {
      font-size: 0.4rem;
      display: flex;
      justify-content: space-between;
      & span:nth-child(2) {
        color: #333;
      }
    }
  }
  .wra_note {
    margin-top: 0.533333rem;
    padding-top: 0.266667rem;
    font-size: 0.4rem;
    color: #333;
    height: 3.666667rem;
    h2 {
      margin-bottom: 0.133333rem;
    }
    .wra_note_info{
      overflow: hiddle;
      height: 4.373333rem;  
    }
  }
  .foo_btn {
    margin: 0 auto; 
    margin-top: 1.866667rem;
    width: 3.56rem;
    height: 1.173333rem;
    line-height: 1.173333rem;
    text-align: center;
    font-size: 0.453333rem;
    font-weight: 700;
    color: #fff;
    background: #647cfa;
    border-radius: 0.586667rem;
  }
}

// 选中高亮
.isShowNav {
  color: #647cfa !important;
  border-bottom: 0.026667rem solid #647cfa;
}
</style>